<template>
    <div class="section-5">
        <div class="container">
            <div class="flex-grow">
                <div class="flex-item">
                    <div class="img"><img src="./images/real-bear-1.png"></div>
                </div>
                <div class="flex-item">
                    <div class="img"><img src="./images/real-bear-2.png"></div>
                </div>
            </div>
        </div>
    </div>
</template>


<style lang="less" scoped>
.section-5{
    background: #000;
    padding:100px 0;
    .flex-item{
        .img{
            cursor: pointer;
            max-width: 97%;
            overflow: hidden;
            img{
                max-width: 100%;
                transform:scale(1);
                transition: all 0.3s ease-in-out;
                &:hover{
                    transform:scale(1.1);
                }
            }
        }
        &:last-child{
            .img{
                margin-left:3%;
            }
        }
    }
}
</style>
